import React, {useEffect} from 'react';
import {Topology} from '@topology/core';
import {PageHeader, Button} from 'antd';
import {
    activityFinal,
    activityFinalIconRect,
    activityFinalTextRect
} from '@topology/activity-diagram';
import {registerNode} from '@topology/core';
import { Store } from 'le5le-store';



let canvas;
let x = 0, y = 0;
// let distance = 0;
const canvasOptions = {
    rotateCursor: '/rotate.cur',
    bkColor: '#f6f6f6'
};
// 这个是预览界面的组件
const Preview = ({history}) => {

    const canvasRegister = () => {
        // activity
        registerNode(
            'activityFinal',
            activityFinal,
            null,
            activityFinalIconRect,
            activityFinalTextRect
        )
    };

    let timeIntervalHere = null;

    // 相当于 componentDidMount()
    useEffect(() => {
        canvas = new Topology('topology-canvas-preview', canvasOptions);
        history.location.state.data.locked = 1;
        canvas.open(history.location.state.data);
        console.log(history.location.state.data);
        canvasRegister();
    }, [history.location.state.data]);

    // 相当于 componentDidMount()
    useEffect(() => {
        // 这个函数的功能应该是：node 指的是小车，这里让小车进行移动，然后 line 指的是某个线
        // 主要是放一些预览的内容进去
        // let node = canvas.data.pens.find((item) => item.data && item.data.car === 1);
        // let line = canvas.data.pens.find((item) => item.type === 1);

        // const timer = setInterval(() => {
        //     if (distance < 360) {
        //         distance += 0.5;
        //     }
        //
        //     // 20211102 为了解决 line 为空的 bug 进行修改
        //     if (line != null){
        //         if (distance > 180) {
        //             line.strokeStyle = 'red';
        //             line.lineWidth = 2;
        //         } else {
        //             line.strokeStyle = 'green';
        //             line.lineWidth = 1;
        //         }
        //     }
        //
        //     // 20211102 为了解决 node 为空的 bug 进行修改
        //     if (node!=null){
        //         if (distance > 350) {
        //             node.rotate = 180;
        //             clearInterval(timer);
        //         }
        //
        //         node.rect.x = 625 + x;
        //         node.rect.y = 541 - distance + y;
        //         canvas.updateProps(true, [node]);
        //     }
        //
        //     canvas.render();
        // }, 30);

        // return () => clearInterval(timer);
    }, [history]);

    // 相当于 componentDidMount()
    // 20211129 自己写的能够自动生成数据的内容
    useEffect(()=>{
        timeIntervalHere = setInterval(()=>{
            Store.set("backEndData", {"KKK": Math.random()})
        }, 2000)
        // 返回值是组件注销时调用的内容，确实已经实现了注销的功能
        return ()=>{
            console.log("is this componentUnMount ? ");
            clearInterval(timeIntervalHere);
        }
    })

    // 自动适应窗口大小
    const onHandleFit = () => {
        const rect = canvas.getRect();
        rect.calcCenter();
        x = document.body.clientWidth / 2 - rect.center.x;
        y = (document.body.clientHeight - 66) / 2 - rect.center.y;
        canvas.translate(x, y);
    };

    // 实际大小
    const onHandlePre = () => {
        canvas.translate(-x, -y);
        x = 0;
        y = 0;
    };

    // 渲染函数
    return (
        <>
            <PageHeader
                style={{
                    border: '1px solid rgb(235, 237, 240)'
                }}
                extra={[
                    <Button type="primary" key="2" onClick={() => onHandleFit()}>
                        自动适应窗口大小
                    </Button>,
                    <Button key="1" onClick={() => onHandlePre()}>
                        实际大小
                    </Button>
                ]}
                onBack={() =>
                    history.push({
                        pathname: '/',
                        state: {data: history.location.state.data, from: '/preview'}
                    })
                }
                title="返回画板"
                subTitle="预览"
            />
            <div id="topology-canvas-preview" style={{height: 'calc(100vh - 66px)', width: '100vw'}}/>
        </>
    );
};

export default Preview;
